<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>闲置列表</title>
    <link href="${applicationScope.basePath}/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/index.css">
    <script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/model.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/userhome.css">
</head>
<body>
<jsp:include page="../header.jsp" flush="true"/>
<div class="container" style="margin-top: 80px;">
    <!--
        描述：左侧个人中心栏
    -->
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <div class="col-md-12">
                    <div class="thumbnail">
                        <img src="${applicationScope.basePath}/images/header.jpg" alt="" class=""
                             style="border-radius: 50%;width: 140px;height: 140px;">
                        <div class="caption">
                            <h3 style="text-align: center;">${requestScope.user.userName}</h3>
                        </div>
                        <hr>
                        <a id="myWallet" class="btn btn btn-warning btn-block"
                           href="${applicationScope.basePath}/user/space/purse"
                           target="iframePage">我的钱包：${requestScope.purse.balance}元</a>
                        <span disabled="true" class="btn btn-warning btn-block" data-toggle="modal"
                              data-target="#myModal"
                              style="margin-top: 15px;">我的信用积分：${requestScope.user.power}</span>
                    </div>
                </div>
            </div>
            <div class="list-group ">
                <a id="orders" href="${applicationScope.basePath}/user/space/orders" class="list-group-item list-group-item-info ">订单中心</a>
                <a id="notice_list" href="${applicationScope.basePath}/user/space"
                   class="list-group-item list-group-item-info">求购中心<span
                        class="badge">${requestScope.num}</span></a>
                <a id="system_msg" href="${applicationScope.basePath}/user/space/sys" class="list-group-item list-group-item-info">系统信息<span
                        class="badge">${requestScope.sys}</span></a>
                <a id="goods_list" href="#" class="list-group-item list-group-item-info">我的商品</a>
                <a id="person_msg" href="${applicationScope.basePath}/user/space/msg"
                   class="list-group-item list-group-item-info">个人设置</a>
            </div>
        </div>
        <!--
            描述：右侧个人内容栏
        -->
        <div class="col-md-10">
            <h4>我的商品</h4>
            <hr/>
            <ul class="nav nav-tabs" role="tablist" style="width: 98%">
                <li class="nav-item active"><a class="nav-link active" data-toggle="tab"
                                               href="#online_goods">在售</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="tab"
                                        href="#out_goods">下架</a></li>
            </ul>
            <div class="tab-content" style="width: 100%;">
                <div id="online_goods" class="container tab-pane active"
                     style="width: 100%;height: 100%;">
                    <div class="row">
                        <c:forEach items="${requestScope.list}" var="item" varStatus="vs">
                            <c:if test="${item.goods.status == 1}">
                                <div class="col-sm-6 col-md-4">
                                    <div class="thumbnail">
                                        <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                            <img style="height: 200px;"
                                                 src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}"
                                                 alt="..."></a>
                                        <div class="caption">
                                            <h4>${item.goods.name}</h4>
                                            <p><a href="#" class="btn btn-primary" onclick="getMsg(${item.goods.id});"
                                                  role="button" data-toggle="modal" data-target="#editGoodsMsg">编辑</a>
                                                <a onclick="return outGoods(this,${item.goods.id},${vs.index});"
                                                   href="#" class="btn btn-default" role="button">下架</a></p>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>

                <div id="out_goods" class="container tab-pane fade"
                     style="width: 100%">
                    <div id="out" class="row">
                        <c:forEach items="${requestScope.list}" var="item" varStatus="vs">
                            <c:if test="${item.goods.status == 0}">
                                <div class="col-sm-6 col-md-4" style="height: 340px;">
                                    <div style="height: 15px;">
                                    <a style="" onclick="deleteOutGoods(this,${item.goods.id});" title="删除"
                                       type="button" class="close"><span style="color: red;">&times;</span></a>
                                    </div>
                                    <div class="thumbnail">
                                        <img style="height: 200px;"
                                             src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}"
                                             alt="...">
                                        <div class="caption">
                                            <h4 style="">${item.goods.name}</h4>
                                            <p>
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                            </p>
                                            <p>
                                                <span>下架时间：${item.goods.end_time}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <hr/>
    <p style="text-align: center;">&copy; 二手交易平台 2020</p>
</footer>

<!-- Modal -->
<div class="modal fade" id="editGoodsMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">编辑商品信息</h4>
            </div>
            <div class="modal-body">
                <form id="update_form" action="#" class="form-horizontal" style="margin: 0 auto;width: 95%;"
                      method="post"
                      enctype='multipart/form-data'>
                    <input id="goodsId" name="id" type="hidden" value=""/>
                    <div class="form-group">
                        <label for="goods_class" class="col-sm-2 control-label">选择分类</label>
                        <div class="col-sm-10 form-inline row">
                            <select id="goods_class" name="catelog_id" class="form-control" style="width: 150px;">
                                <option value="1">闲置数码</option>
                                <option value="2">代步工具</option>
                                <option value="3">电器日用</option>
                                <option value="4">教材资料</option>
                                <option value="5">美妆衣物</option>
                                <option value="6">运动棋牌</option>
                                <option value="7">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="goods_name" class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-10 form-inline row">
                            <input type="text" name="name" class="form-control" id="goods_name" placeholder=""
                                   style="width: 150px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="goods_price" class="col-sm-2 control-label">商品原价</label>
                        <div class="col-sm-10 form-inline row">
                            <input type="text" name="real_price" class="form-control" id="old_goods_price"
                                   placeholder=""
                                   style="width: 150px;" onblur="isPrice(this,'#error_old_price');">（选填）
                            <label id="error_old_price" style="color: red;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="goods_price" class="col-sm-2 control-label">商品价格</label>
                        <div class="col-sm-10 form-inline row">
                            <input type="text" name="price" class="form-control" id="goods_price" placeholder=""
                                   style="width: 150px;" onblur="isPrice(this,'#error_price');">
                            <label id="error_price" style="color: red;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="goods_num" class="col-sm-2 control-label">商品数量</label>
                        <div class="col-sm-10 form-inline row">
                            <input type="text" name="number" class="form-control" id="goods_num" placeholder=""
                                   style="width: 150px;" onblur="isNum(this);">
                            <label id="error_num" style="color: red;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="textarea_dec" class="col-sm-2 control-label">商品描述</label>
                        <div class="col-sm-10 row">
                    <textarea id="textarea_dec" maxlength="200" name="describle" class="form-control"
                              rows="5" onkeydown="limit_number();"></textarea>
                            <span id="textarea_str_num">200</span>/200
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-default" data-dismiss="modal">退出</button>
                <button form="update_form" id="sub_update" type="submit" onclick="return isTrue();"
                        class="btn btn-primary">保存修改
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${applicationScope.basePath}/js/jquery.serializejson.js"></script>
<script>

    /*获取商品信息*/
    function getMsg(id) {
        $.ajax({
            url: "${applicationScope.basePath}/user/space/goods/" + id,
            type: "GET",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                $('#goodsId').val(data['id']);
                $('#goods_class option:selected').attr("selected", false);
                $($('#goods_class option')[data.catelog_id - 1]).attr("selected", true);
                $('#goods_name').val(data['name']);
                $('#old_goods_price').val(data['real_price']);
                $('#goods_price').val(data['price']);
                $('#goods_num').val(data['number']);
                $('#textarea_dec').val(data['describle']);
            },
            error: function () {

            }
        });
    }

    /*删除下架的商品*/
    function deleteOutGoods(obj, id) {
        if (confirm("确定删除吗？")) {
            $.ajax({
                url: "${applicationScope.basePath}/user/space/outG/" + id,
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                success: function (data) {
                    if (data.flag) {
                        $(obj).parent().remove();
                    } else {
                        alert(data.errorMsg);
                    }
                },
                error: function () {

                }
            });
        }
    }



    /*下架商品*/
    function outGoods(obj, id, i) {
        if (confirm("确定下架吗？")) {
            $.ajax({
                url: "${applicationScope.basePath}/user/space/outG/" + id,
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                success: function (data) {
                    $(obj).parent().parent().parent().parent().remove();
                    $('#out').prepend(' <div class="col-sm-6 col-md-4" style="height: 340px;">\n' +
                        '                                    <div class="thumbnail">\n' +
                        '                                     <div style="height: 15px;">\n' +
                        '                                           <a onclick="deleteOutGoods(this,'+ data.goods.id +');" title="删除" type="button" class="close" data-dismiss="modal" aria-label="Close"><span style="color: red;" aria-hidden="true">&times;</span></a>\n' +
                        '                                     </div>\n' +
                        '                                        <img style="height: 200px;"\n' +
                        '                                             src="${applicationScope.imgPath}/' + data.imageList[0].imgUrl + '"\n' +
                        '                                             alt="...">\n' +
                        '                                        <div class="caption">\n' +
                        '                                            <h4 style="">' + data.goods.name + '</h4>\n' +
                        '                                            <p>\n' +
                        '                                                <span>售价<em>￥</em><strong>' + data.goods.price + '</strong><em>元</em></span>\n' +
                        '                                            </p>\n' +
                        '                                            <p>\n' +
                        '                                                <span>下架时间：' + data.goods.end_time + '</span>\n' +
                        '                                            </p>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </div>');
                },
                error: function () {

                }
            });
            return false;
        }
    }

    $(function () {

        /*表单提交*/
        $("#update_form").submit(function (encodedURIComponent) {
            //设置按钮不可用
            $("#sub_update").button('loading');
            //获取表单信息,转化为json字符串
            let data = JSON.stringify($("#update_form").serializeJSON());
            //校验通过,发送ajax请求,提交表单
            $.ajax({
                url: "${applicationScope.basePath}/user/space/goods",
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: data,
                success: function (data) {
                    if (data.flag) {
                        $("#sub_update").button('reset');
                        $("#editGoodsMsg").trigger("click");
                        alert('修改成功');
                    } else {
                        alert(data.errorMsg);
                    }
                },
                error: function () {
                }
            });
            return false;
        });

        //模态框关闭事件 , 清空下拉列表的选择
        $('#editGoodsMsg').on('hide.bs.modal', function () {
            $('#goods_class option:selected').attr("selected", false);
        });
    });

    //限制文本域中的字符数
    function limit_number() {
        $('#textarea_str_num').text(200 - ($('#textarea_dec').val().length));
    }

    //判断价格是否是货币
    function isPrice(obj, id) {
        let num = obj.value;
        let re = /^\d+(?:\.\d{0,2})?$/;
        if (num.match(re) == null) {
            obj.innerText = '';
            obj.value = '';
            $(id).text('请输入正确的货币值');
            return false;
        }
        $(id).text('');
        return true;
    }

    //判断是否是正整数
    function isNum(obj) {
        let num = obj.value;
        if (!(/(^[0-9]*[1-9][0-9]*$)/.test(num))) {
            obj.innerText = '';
            obj.value = '';
            $('#error_num').text('请输入正确的商品数量');
            return false;
        }
        $('#error_num').text('');
        return true;
    }

    //判断发布的信息是否可以提交
    function isTrue() {
        if ($('#goods_name').val() === '') {
            alert("商品名称为空，无法提交");
            return false;
        } else if ($('#goods_price').val() === '') {
            alert("商品价格为空，无法提交");
            return false;
        } else if ($('#goods_dec').val() === '') {
            alert("商品描述为空，无法提交");
            return false;
        } else if ($('#goods_num').val() === '') {
            alert("商品数量为空，无法提交");
            return false;
        } else if ($('#textarea_dec').val() === '') {
            alert("商品描述为空，无法提交");
            return false;
        } else if ($('#image_input').val() === '') {
            alert("商品图片为空，无法提交");
            return false;
        } else {
            return true;
        }
    }
</script>
</html>
